<template>
  <div class="container">
    <h2 class="text-center mt-5">My Vue Todo App</h2>

    <!-- Input -->
    <div class="d-flex">
      <input v-model.trim="task" type="text" class="form-control" placeholder="Enter a task">
      <button @click="submitTask" class="btn btn-warning rounded-0">SUBMIT</button>
    </div>

    <!-- Task table -->
    <table class="table table-bordered mt-5">
      <thead>
        <tr>
          <th scope="col">Task</th>
          <th scope="col">Status</th>
          <th scope="col" class="text-center">#</th>
          <th scope="col" class="text-center">#</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(task, index) in tasks" :key="index + ' ' + task">
          <td>
            <span :class="{ 'finished': task.status === 'finished' }">{{ task.name }}</span>
          </td>
          <td style="width: 120px;">
            <span @click="changeStatus(index)" class="pointer"
              :class="{ 'text-danger': task.status === 'to-do',
              'text-warning': task.status === 'in-progress', 
              'text-success': task.status === 'finished' }"
            >
              {{ firstCharUpper(task.status) }}
            </span>
          </td>
          <td>
            <div class="text-center" @click="editTask(index)">
              <span class="fa fa-pen"></span>
            </div>
          </td>
          <td>
            <div class="text-center" @click="deleteTask(index)">
              <span class="fa fa-trash"></span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Todo',
  data () {
    return {
      task: '',
      editTaskIndex: null,
      availableStatus: ['to-do', 'in-progress', 'finished'],
      tasks: [
        {
          name: 'Steal bananas from the store.',
          status: 'to-do'
        },
        {
          name: 'Drink a cup of coffee in 10 minutes',
          status: 'in-progress'
        }
      ]
    }
  },
  methods: {
    submitTask () {
      // console.log(this.task)
      if (this.task.length === 0) {
        return
      }
      if (this.editTaskIndex === null) {
          this.tasks.push({
          name: this.task,
          status: 'to-do'
        })
      } else {
        this.tasks[this.editTaskIndex].name = this.task
        this.editTaskIndex = null
      }
      this.status = ''
    },
    deleteTask (index) {
      this.tasks.splice(index, 1)
    },
    editTask (index) {
      this.task = this.tasks[index].name
      this.editTaskIndex = index
    },
     changeStatus (index) {
       let nexIndex = this.availableStatus.indexOf(this.tasks[index].status)
       if (++nexIndex > 2) {
         nexIndex = 0
       }
       this.tasks[index].status = this.availableStatus[nexIndex]
     },
     firstCharUpper (str) {
       return str.charAt(0).toUpperCase() + str.slice(1)
     }
  }
}
</script>

<style scoped>
.pointer {
  cursor: pointer;
}
.finished {
  text-decoration: line-through;
}
</style>
